<template>
 
  <div style="padding-top: 20px;">
    <van-cell-group inset v-for="(item,key,index) in reportlist" :key="index" style="margin-bottom:20px">
      <div class="L-form-title-row">
        <div>
          <i class="iconfont icon-piliangcaozuo1" style="color:#1683f7"></i>
          <!-- <van-icon name="apps-o" /> -->
          <span class="L-text L-primary-text-color L-bold-text" style="margin-left:10px">{{key}}</span>
        </div>
      </div>

      <van-row v-for="(fitem,findex) in item" :key="findex" class="L-report-item" @click="handleClick(fitem)">
        <van-col :span="3" class="L-text-align-center">
          <i class="iconfont icon-radio"></i>
        </van-col>
        <van-col :span="18">{{fitem.title}}</van-col>
        <van-col :span="3" class="L-text-align-center">
          <i class="iconfont icon-xiayibu2"></i>
        </van-col>

      </van-row>

    </van-cell-group>

  </div>

  
  <Tabbar />
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import Tabbar from "@/components/common/Tabbar.vue";
import { ref, onMounted } from "vue";
import { apiConfigurable } from "@/request/api/api";
import {
  closeToast,
  showLoadingToast,
  showToast,
  showSuccessToast,
} from "vant";

const active = ref("标签 2");

onMounted(() => {
  getData();
});

interface reportlistItemVO{
  title:string
}
interface reportlistVO{
  [key:string]:Array<reportlistItemVO>
}

const reportlist = ref<reportlistVO>({});

function getData() {
  const url = "report.list.do";

  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });

  apiConfigurable(url).then((res) => {
    if (res.code === 0) {
      reportlist.value = res.data.jsondata.reportlist;
      closeToast();
    }
  });
}

function handleClick(item){
  router.push({
    path:"/reportTable",
    query:{...item,dd_orientation:'auto'}
  })

}

// interface RowVO {
//   id: number;
//   name: string;
//   role: string;
//   sex: string;
//   age: number;
//   address: string;
// }

//  const tableData = ref<RowVO[]>([
//   {
//     id: 10001,
//     name: "Test1",
//     role: "Develop",
//     sex: "Man",
//     age: 28,
//     address: "test abc",
//   },
//   {
//     id: 10002,
//     name: "Test2",
//     role: "Test",
//     sex: "Women",
//     age: 22,
//     address: "Guangzhou",
//   },
//   {
//     id: 10003,
//     name: "Test3",
//     role: "PM",
//     sex: "Man",
//     age: 32,
//     address: "Shanghai",
//   },
//   {
//     id: 10004,
//     name: "Test4",
//     role: "Designer",
//     sex: "Women",
//     age: 24,
//     address: "Shanghai",
//   },
// ]);
</script>

<style scoped>
.L-report-item {
  width: 100%;
  margin: 10px auto;
}
</style>